<template>
	<view class="u-page">
		<view class="head">
			<div class="headline">
				<u-icon name="arrow-left" color="white" size="20" @tap="goBack()"></u-icon>
				<p class="modelName">为您估价</p>
				<u-icon name="bell" color="white" size="25"></u-icon>
			</div>
		</view>
		<view class="assessModel">
			<table class="assessTable">
				<tr>
					<td>卖车地点</td>
					<td>
						<u-picker :show="placeOfMaicheShow" :columns="placeOfMaiche" @cancel="cancelHandler"
							@confirm="confirmHandler">
						</u-picker>
						<span class="optionText" @click="placeOfMaicheShow = true;isPick=0">{{showPlaceOfMaiche}}</span>
						<u-icon name="arrow-right" color="grey" size="20" @click="placeOfMaicheShow = true;isPick=0"></u-icon>
					</td>
				</tr>
				<tr>
					<td>车型</td>
					<td>
						<u-picker :show="carModelShow" :columns="carModel" @cancel="cancelHandler"
							@confirm="confirmHandler">
						</u-picker>
						<span class="optionText" @click="carModelShow = true;isPick=1">{{showCarModel}}</span>
						<u-icon name="arrow-right" color="grey" size="20" @click="carModelShow = true;isPick=1"></u-icon>
					</td>
				</tr>
				<tr>
					<td>上牌时间</td>
					<td>
						<u-datetime-picker
							ref="datetimePicker"
							:show="timeofShangPaiShow"
						    v-model="value1"
							mode="date"
							:formatter="formatter"
							@cancel="cancelHandler"
							@confirm="confirmHandler">
						</u-datetime-picker>
						<span class="optionText" @click="timeofShangPaiShow = true;isPick=2">{{showTime}}</span>
						<u-icon name="arrow-right" color="grey" size="20" @click="timeofShangPaiShow = true;isPick=2"></u-icon>
					</td>
				</tr>
				<tr>
					<td>行驶里程(万公里)</td>
					<td>
						<u-picker :show="roadHaulShow" :columns="roadHaul" @cancel="cancelHandler"
							@confirm="confirmHandler">
						</u-picker>
						<span class="optionText" @click="roadHaulShow = true;isPick=3">{{showRoadHaul}}</span>
						<u-icon name="arrow-right" color="grey" size="20" @click="roadHaulShow = true;isPick=3"></u-icon>
					</td>
				</tr>
				<tr>
					<td>联系方式</td>
					<td>
						<u-picker :show="contactInformationShow" :columns="contactInformation" @cancel="cancelHandler"
							@confirm="confirmHandler">
						</u-picker>
						<span class="optionText" @click="contactInformationShow = true;isPick=4">{{showContactInformation}}</span>
						<u-icon name="arrow-right" color="grey" size="20" @click="contactInformationShow = true;isPick=4"></u-icon>
					</td>
				</tr>
				<tr>
					<td>卖车意向</td>
					<td>
						<u-picker :show="maicheIntentionShow" :columns="maicheIntention" @cancel="cancelHandler"
							@confirm="confirmHandler">
						</u-picker>
						<span class="optionText" @click="maicheIntentionShow = true;isPick=5">{{showMaicheIntention}}</span>
						<u-icon name="arrow-right" color="grey" size="20" @click="maicheIntentionShow = true;isPick=5"></u-icon>
					</td>
				</tr>
			</table>
		</view>
		<view class="foot">
			<u-button text="开始估价" color="linear-gradient(to bottom, #4481EB, #04BEFE)" style="width:80%;border-radius: 10px;"></u-button>
			<p style="color: gray;font-size: 5px;text-align: center;">* 您的爱车每天约贬值0.03%</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPick:0,
				placeOfMaicheShow: false,
				carModelShow:false,
				timeofShangPaiShow:false,
				roadHaulShow:false,
				contactInformationShow:false,
				maicheIntentionShow:false,
				value1: Number(new Date()),
				showPlaceOfMaiche:'请选择',
				showCarModel:'请选择',
				showTime:'请选择',
				showRoadHaul:'请选择',
				showContactInformation:'请选择',
				showMaicheIntention:'请选择',
				placeOfMaiche: [
				    ['请选择','深圳', '上海', '北京','广州','长沙','重庆','南京','北海']
				],
				carModel:[
					['请选择','小型suv','中型suv','大型suv','皮卡车','货车','小轿车','轿跑','跑车']
				],
				roadHaul:[
					['请选择',1,2,3,4,5,6,7,8,9,10]
				],
				contactInformation:[
					['请选择','电话','座机','微信','QQ']
				],
				maicheIntention:[
					['请选择','卖','就看看']
				]
			}
		},
		methods: {
			confirmHandler(e) {
				// console.log(e)
				if (this.isPick==0) {
					this.showPlaceOfMaiche = e.value[0];
					this.placeOfMaicheShow = false;
				} else if (this.isPick==1) {
					this.showCarModel = e.value[0];
					this.carModelShow = false;
				}else if (this.isPick==2) {
					// 处理时间戳
					const timeFormat = uni.$u.timeFormat;
					this.showTime = timeFormat(e.value, 'yyyy年mm月dd日');
					// console.log(this.value1)
					// var date = new Date(this.value1)
					// this.showTime = date.getFullYear()+'年'+date.getMonth()+'月'+date.getDay()+'日';
					this.timeofShangPaiShow = false;
				}else if (this.isPick==3) {
					this.showRoadHaul = e.value[0];
					this.roadHaulShow = false;
				}else if (this.isPick==4) {
					this.showContactInformation = e.value[0];
					this.contactInformationShow = false;
				}else if (this.isPick==5) {
					this.showMaicheIntention = e.value[0];
					this.maicheIntentionShow = false;
				}
				
			},
			cancelHandler() {
				this.placeOfMaicheShow = false;
				this.carModelShow = false;
				this.timeofShangPaiShow = false;
				this.roadHaulShow = false;
				this.contactInformationShow = false;
				this.maicheIntentionShow = false;
				
			},
			formatter(type, value) {
			    if (type === 'year') {
			        return `${value}年`
			    }
			    if (type === 'month') {
					return `${value}月`
			    }
			    if (type === 'day') {
					return `${value}日`
			    }
			    return value
			},
			goBack() {
				// 多层级下用这个
				// uni.navigateBack({
				// 	关闭当前页面，返回上一页面或多级页面。
				// 	delta: 1
				// });
				
				uni.switchTab({
					//关闭当前页面，返回上一页面或多级页面。
					url: '/pages/maiche1/maiche1',
				});
			}
		}
	}
</script>

<style>
	.u-page{
		background-image: url("../../static/tu/rental cars_top.png");
		width: 101%;
		height: 183px;
	}
	.head{
		margin:0px;
		width: 100%;
		height: 65px;
		/* position: absolute; */
	}
	.headline{
		padding-top: 28px;
		padding-left: 15px;
		padding-right: 15px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		/* position: relative; */
	}
	.modelName{
		margin: auto;
		color:white;
	}
	.assessTable{
		margin:auto;
		margin-top: 20px;
		width: 86%;
		line-height: 20px;
		background-color: white;
		border-radius: 10px;
		
	}
	.assessTable tr td:nth-child(1){
		padding: 15px;
		width: 50%;
		font-size: 14px;
		font-weight: bold;
	}
	.assessTable tr td:nth-child(2){
		padding: 15px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		/* position: relative; */
	}
	.optionText{
		color:gray;
		font-size: 10px;
	}
	.foot{
		width: 100%;
		position: fixed;
		bottom: 0px;
	}
</style>